<template>
  <div class="image-share-page">
    <h2>电脑配件晒单分享</h2>
    <div class="image-list">
      <div class="image-card" v-for="(item, index) in images" :key="index">
        <img :src="item.url" :alt="item.title" />
        <div class="info">
          <p class="title">{{ item.title }}</p>
          <p class="time">{{ item.time }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImageSharePage',
  data() {
    return {
      images: [
        {
          url: 'https://ms.bdimg.com/pacific/0/pic/-1767309563_-1573251480.jpg?x=0&y=0&h=200&w=300&vh=200.00&vw=300.00&oh=200.00&ow=300.00',
          title: '机械键盘手感真不错，RGB灯效超炫！',
          time: '2025-05-14 11:20'
        },
        {
          url: 'https://ms.bdimg.com/pacific/0/pic/1625724478_-544345126.jpg?x=0&y=0&h=200&w=300&vh=200.00&vw=300.00&oh=200.00&ow=300.00',
          title: '刚换的新显示器，4K超清爽歪了！',
          time: '2025-05-13 19:45'
        },
        {
          url: 'https://ms.bdimg.com/pacific/0/pic/1686763152_1743883496.jpg?x=0&y=0&h=200&w=300&vh=200.00&vw=300.00&oh=200.00&ow=300.00',
          title: '新装机完成，风冷加ARGB灯，帅！',
          time: '2025-05-12 21:10'
        }
      ]
    };
  }
}
</script>

<style scoped>
.image-share-page {
  padding: 20px;
  background-color: #f8f9fb;
  font-family: "微软雅黑", sans-serif;
}

h2 {
  text-align: center;
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
}

.image-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.image-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.image-card img {
  width: 100%;
  height: auto;
  display: block;
}

.info {
  padding: 12px;
}

.title {
  font-size: 15px;
  font-weight: bold;
  color: #444;
}

.time {
  font-size: 13px;
  color: #999;
  margin-top: 4px;
}
</style>
